<template>
  <div>
    <h3>下面是子组件</h3>
    <span class="attr">姓名</span> <span>{{sname}}</span> <br>
    <span class="attr">班级</span> <span>{{sclass}}</span> <br>
    <span class="attr">年龄</span> <span>{{sage}}</span> <br>
    <slot name="clothes"> </slot>
    <button @click="change">改变age</button>

    <h3>下面是插槽</h3>
    <slot name="sex"></slot>
  </div>
</template>

<script>
export default {
  props: [
    'sname',
    'sclass',
    'sage'
  ],
  methods: {
    change: function () {
      this.$emit('changeage', 30)
    }
  }
  
}
</script>

<style>
.attr {
  color: red;
}
</style>